<template>
    <!-- <img src="../../public/bg.jpg" alt=""> -->
    <div class="bg">
        <div class="box">
            <Transition mode="out-in">
                <el-card v-if="isLogin">
                    <h1>欢迎登录</h1>
                    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
                        <el-form-item label="账号" prop="username">
                            <el-input v-model="ruleForm.username" />
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model="ruleForm.password" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm(ruleFormRef)">
                                登录
                            </el-button>
                            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <el-link type="danger" @click="isLogin = false">还没账号，去注册</el-link>
                </el-card>

                <el-card v-else>
                    <h1>欢迎注册</h1>
                    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
                        <el-form-item label="账号" prop="username">
                            <el-input v-model="ruleForm.username" />
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model="ruleForm.password" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm2(ruleFormRef)">
                                注册
                            </el-button>
                            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <el-link type="success" @click="isLogin = true">已有账号，去登录</el-link>
                </el-card>
            </Transition>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
let isLogin = ref(true)

const ruleFormRef = ref()
const ruleForm = ref({
    username: '',
    password: ''
})

const rules = ref({
    username: [
        { required: true, message: '账号不能为空', trigger: 'blur' },
        { min: 4, max: 8, message: '长度为4-8位', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 4, max: 8, message: '长度为4-8位', trigger: 'blur' },
    ],
})

import { loginAPI, registerAPI } from '@/api/login'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            let res = await loginAPI(ruleForm.value)
            if (res.data.data) {
                localStorage.setItem('token', res.data.data)
                ElMessage.success(res.data.msg)
                router.push('/index')
            } else {
                ElMessage.error(res.data.msg)
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

const submitForm2 = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            let res = await registerAPI(ruleForm.value)
            if (res.data.msg === '注册成功') {
                ElMessage.success(res.data.msg)
                isLogin.value = true
            } else {
                ElMessage.error(res.data.msg)
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style scoped>
.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../public/bg.jpg');
    background-size: cover;
    background-position: center;
}

/* img {
    width: 100%;
    height: 100vh;
} */

.box {
    width: 480px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

.v-enter-to,
.v-leave-from {
    opacity: 1;
}

.v-enter-active {
    transition: opacity 0.5s ease;
    animation: toLeft 0.5s ease forwards;
}

.v-leave-active {
    transition: opacity 0.5s ease;
    animation: toRight 0.5s ease forwards;
}

@keyframes toLeft {
    0% {
        transform: translateX(200px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes toRight {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(200px);
    }
}
</style>